<!DOCTYPE html>
<html>
<head>
    <title>平台管理</title>
    <#include "/header.html">
    <link
            href="${request.contextPath}/statics/plugins/jquery-layout/jquery.layout-latest.css"
            rel="stylesheet" />
    <link
            href="${request.contextPath}/statics/css/Transfer.css"
            rel="stylesheet" />
</head>
<body>


<div id="rrapp" v-cloak class="container-div ui-layout-center">
    <div v-show="showList">
        <div class="grid-btn">
            <div class="form-group col-sm-2">
                <input type="text" class="form-control" v-model="q.mailName"
                       @keyup.enter="query" placeholder="收件人名称">
             </div>
            <div class="form-group col-sm-2">
                <input type="text" class="form-control" v-model="q.mails"
                       @keyup.enter="query" placeholder="邮箱地址">
            </div>
            <a class="btn btn-default" @click="query">查询</a>
            <a class="btn btn-primary" @click="add"><i class="fa fa-plus"></i>&nbsp;新增</a>
            <a class="btn btn-primary" @click="update" id="editJqd"><i class="fa fa-pencil-square-o"></i>&nbsp;修改</a>
    <a class="btn btn-danger" @click="del"><i class="fa fa-trash-o"></i>&nbsp;删除</a>
</div>


<div class="col-sm-12 select-info table-striped">
    <table id="bootstrap-table" data-mobile-responsive="true"></table>
</div>
</div>

<div v-show="!showList" class="panel panel-default">
    <div class="panel-heading">{{title}}</div>
    <form class="form-horizontal" id="form" style="width: 770px;">
        <div class="form-group">
            <div class="col-sm-2 control-label" style="text-align: center">邮件地址:</div>
            <div class="col-sm-10">
                <input type="text" class="form-control" v-model="user.mails" placeholder="请输入正确的邮件地址"/>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-2 control-label" style="text-align: center">用户名称:</div>
            <div class="col-sm-10">
                <input type="text" class="form-control" v-model="user.mailName" placeholder="请输入用户名称"/>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-2 control-label" style="text-align: center">绑定邮件:</div>
            <div class="col-sm-10">
                <!--                      穿梭框                          -->

                <div class="ty-transfer mt20 ml20" id="ued-transfer-1">
                    <div class="fl ty-transfer-list transfer-list-left">
                        <div class="ty-transfer-list-head">
                            未绑定
                        </div>

                        <div class="ty-transfer-list-body">
                            <ul class="ty-tree-select" id="unBindMail">
                                <!--<li>-->
                                    <!--<div class="ty-tree-div">-->
                                        <!--<label class="tyue-checkbox-wrapper">-->
                            <!--<span class="tyue-checkbox">-->
                                <!--<input type="checkbox" class="tyue-checkbox-input" id="tyue-checkbox-blue">-->
                                <!--<span class="tyue-checkbox-circle">-->
                                <!--</span>-->
                            <!--</span>-->
                                            <!--<span class="tyue-checkbox-txt" title="穿梭框列表内容 &#45;&#45;&#45;&#45; 1">-->
                                <!--穿梭框列表内容 &#45;&#45;&#45;&#45; 1-->
                            <!--</span>-->
                                        <!--</label>-->
                                    <!--</div>-->
                                <!--</li>-->
                                <!--<li>-->
                                    <!--<div class="ty-tree-div">-->
                                        <!--<label class="tyue-checkbox-wrapper">-->
                            <!--<span class="tyue-checkbox">-->
                                <!--<input type="checkbox" class="tyue-checkbox-input" id="tyue-checkbox-blue">-->
                                <!--<span class="tyue-checkbox-circle">-->
                                <!--</span>-->
                            <!--</span>-->
                                            <!--<span class="tyue-checkbox-txt" title="穿梭框列表内容 &#45;&#45;&#45;&#45; 2">-->
                                <!--穿梭框列表内容 &#45;&#45;&#45;&#45; 2-->
                            <!--</span>-->
                                        <!--</label>-->
                                    <!--</div>-->
                                <!--</li>-->
                                <!--<li>-->
                                    <!--<div class="ty-tree-div">-->
                                        <!--<label class="tyue-checkbox-wrapper">-->
                            <!--<span class="tyue-checkbox">-->
                                <!--<input type="checkbox" class="tyue-checkbox-input" id="tyue-checkbox-blue">-->
                                <!--<span class="tyue-checkbox-circle">-->
                                <!--</span>-->
                            <!--</span>-->
                                            <!--<span class="tyue-checkbox-txt" title="穿梭框列表内容穿梭框列表内容 &#45;&#45;&#45;&#45; 3">-->
                                <!--穿梭框列表内容 &#45;&#45;&#45;&#45; 3-->
                            <!--</span>-->
                                        <!--</label>-->
                                    <!--</div>-->
                                <!--</li>-->
                                <!--<li>-->
                                    <!--<div class="ty-tree-div">-->
                                        <!--<label class="tyue-checkbox-wrapper">-->
                            <!--<span class="tyue-checkbox">-->
                                <!--<input type="checkbox" class="tyue-checkbox-input" id="tyue-checkbox-blue">-->
                                <!--<span class="tyue-checkbox-circle">-->
                                <!--</span>-->
                            <!--</span>-->
                                            <!--<span class="tyue-checkbox-txt" title="穿梭框列表内容&#45;&#45;&#45;&#45; 4">-->
                                <!--穿梭框列表内容 &#45;&#45;&#45;&#45; 4-->
                            <!--</span>-->
                                        <!--</label>-->
                                    <!--</div>-->
                                <!--</li>-->

                            </ul>
                        </div>
                        <div class="ty-transfer-list-foot">
                            <div class="ty-tree-div">
                                <div class="tyc-check-blue fl">
                                    <input type="checkbox" class="transfer-all-check" id="tyc-check-blue">
                                    <span>
                    </span>
                                </div>
                                <div class="ty-tree-text">
                                    全选
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="fl ty-transfer-operation">
        <span class="ty-transfer-btn-toright to-switch">
        </span>
                        <span class="ty-transfer-btn-toleft to-switch">
        </span>
                    </div>
                    <div class="fl ty-transfer-list transfer-list-right">
                        <div class="ty-transfer-list-head">
                            已绑定
                        </div>
                        <div class="ty-transfer-list-body">
                            <ul class="ty-tree-select" id="bindMail">
                                <!--<li>-->
                                    <!--<div class="ty-tree-div">-->
                                        <!--<label class="tyue-checkbox-wrapper">-->
                            <!--<span class="tyue-checkbox">-->
                                <!--<input type="checkbox" class="tyue-checkbox-input" id="tyue-checkbox-blue">-->
                                <!--<span class="tyue-checkbox-circle">-->
                                <!--</span>-->
                            <!--</span>-->
                                            <!--<span class="tyue-checkbox-txt" title="穿梭框列表内容 &#45;&#45;&#45;&#45; 7">-->
                                <!--穿梭框列表内容 &#45;&#45;&#45;&#45; 5-->
                            <!--</span>-->
                                        <!--</label>-->
                                    <!--</div>-->
                                <!--</li>-->
                                <!--<li>-->
                                    <!--<div class="ty-tree-div">-->
                                        <!--<label class="tyue-checkbox-wrapper">-->
                            <!--<span class="tyue-checkbox">-->
                                <!--<input type="checkbox" class="tyue-checkbox-input" id="tyue-checkbox-blue">-->
                                <!--<span class="tyue-checkbox-circle">-->
                                <!--</span>-->
                            <!--</span>-->
                                            <!--<span class="tyue-checkbox-txt" title="穿梭框列表内容 &#45;&#45;&#45;&#45; 8">-->
                                <!--穿梭框列表内容 &#45;&#45;&#45;&#45; 5-->
                            <!--</span>-->
                                        <!--</label>-->
                                    <!--</div>-->
                                <!--</li>-->
                                <!--<li>-->
                                    <!--<div class="ty-tree-div">-->
                                        <!--<label class="tyue-checkbox-wrapper">-->
                            <!--<span class="tyue-checkbox">-->
                                <!--<input type="checkbox" class="tyue-checkbox-input" id="tyue-checkbox-blue">-->
                                <!--<span class="tyue-checkbox-circle">-->
                                <!--</span>-->
                            <!--</span>-->
                                            <!--<span class="tyue-checkbox-txt" title="穿梭框内容穿梭框内容穿梭框内容 &#45;&#45;&#45;&#45; 9">-->
                               <!--穿梭框列表内容 &#45;&#45;&#45;&#45; 7-->
                            <!--</span>-->
                                        <!--</label>-->
                                    <!--</div>-->
                                <!--</li>-->
                                <!--<li>-->
                                    <!--<div class="ty-tree-div">-->
                                        <!--<label class="tyue-checkbox-wrapper">-->
                            <!--<span class="tyue-checkbox">-->
                                <!--<input type="checkbox" class="tyue-checkbox-input" id="tyue-checkbox-blue">-->
                                <!--<span class="tyue-checkbox-circle">-->
                                <!--</span>-->
                            <!--</span>-->
                                            <!--<span class="tyue-checkbox-txt" title="穿梭框列表内容穿梭框列表内容 &#45;&#45;&#45;&#45; 10">-->
                                <!--穿梭框列表内容......-->
                            <!--</span>-->
                                        <!--</label>-->
                                    <!--</div>-->
                                <!--</li>-->
                            </ul>
                        </div>
                        <div class="ty-transfer-list-foot">
                            <div class="ty-tree-div">
                                <div class="tyc-check-blue fl">
                                    <input type="checkbox" class="transfer-all-check" id="tyc-check-blue">
                                    <span>
                    </span>
                                </div>
                                <div class="ty-tree-text">
                                    全选
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="clearboth">
                    </div>

                </div>
                <!--                      穿梭框                          -->
            </div>
        </div>
       <div class="form-group">
            <div class="col-sm-5 control-label"></div>
            <input type="button" ref="submitBtn" class="btn btn-primary" @click="saveOrUpdate" value="确定"/>
            &nbsp;&nbsp;<input type="button" class="btn btn-warning" @click="reload" value="返回"/>
        </div>
    </form>

</div>
</div>

<!-- 选择部门 -->
<div id="deptLayer" style="display: none; padding: 10px;">

    <div id="deptTree" class="ztree"></div>

</div>
<script
        src="${request.contextPath}/statics/plugins/jquery-layout/jquery.layout-latest.js"></script>
<script
        src="${request.contextPath}/statics/js/Transfer.js"></script>

<!-- <script src="${request.contextPath}/statics/js/modules/sys/user.js?_${.now?long}"></script>
-->
<script>


    $(document)
        .ready(
            function() {
                $("#ued-transfer-1").transferItem();
                $('body').layout({
                    west__size : 185
                });
                /* queryUserList();*/
                $('#bootstrap-table')
                    .bootstrapTable(
                        {
                            method : 'post', // 服务器数据的请求方式 get or post
                            url : baseURL + 'mail/findMailPage', // 服务器数据的加载地址
                            showRefresh : true,
                            showToggle : true,
                            showColumns : true,
                            //showExport :true,
                            sortable: true,
                            sortName:"userId",// 排序列名称
                            sortOrder: "desc",
                            iconSize : 'outline',
                            toolbar : '#exampleToolbar',
                            striped : true, // 设置为true会有隔行变色效果
                            dataType : "json", // 服务器返回的数据类型
                            pagination : true, // 设置为true会在底部显示分页条
                            // queryParamsType : "limit",
                            // //设置为limit则会发送符合RESTFull格式的参数
                            singleSelect : false, // 设置为true将禁止多选
                            // contentType : "application/x-www-form-urlencoded",
                            // //发送到服务器的数据编码类型
                            pageSize : 10, // 如果设置了分页，每页数据条数
                            pageNumber : 1, // 如果设置了分布，首页页码
                            // search : true, // 是否显示搜索框
                            //showColumns : false, // 是否显示内容下拉框（选择显示的列）
                            sidePagination : "server", // 设置在哪里进行分页，可选值为"client" 或者
                            // "server"
                            queryParams : function(params) {
                                //console.log(params)
                                return {
                                    // 说明：传入后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对
                                    limit : params.limit+'',
                                    page : (params.offset/params.limit) + 1 + '',
                                    mailName: vm.q.mailName,
                                    mails:vm.q.mails
                                   // sidx: params.sort,      //排序列名
                                    //order: params.order //排位命令（desc，asc）
                                    /* sort:"userId",
                                    order:"desc" */
                                };
                            },
                            // //请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果
                            // queryParamsType = 'limit' ,返回参数必须包含
                            // limit, offset, search, sort, order 否则, 需要包含:
                            // pageSize, pageNumber, searchText, sortName,
                            // sortOrder.
                            // 返回false将会终止请求
                            columns : [
                                {
                                    checkbox : true
                                },
                                {
                                    field : 'mailName', // 列字段名
                                    title : '收件人名称', // 列标题
                                    align : 'center'
                                },
                                {
                                    field : 'mails',
                                    align : 'center',
                                    title : '邮箱地址'
                                },
                               {
                                    field : 'createTime',
                                    align : 'center',
                                    title : '创建时间'
                                },
                                {
                                    field : 'typeList',
                                    title : '绑定类型',
                                    align : 'center',
                                    formatter : function(
                                        value, row,
                                        index) {
                                        //console.log(value);
                                        var str = '';
                                        for(item of value){
                                            str  = str + '<span class="label label-primary" style="padding: 10px 10px;margin-right:8px;">'+item.typeName+'</span>';
                                        }
                                        return str;
                                    }
                                },
                                {
                                    title : '操作',
                                    field : 'id',
                                    align : 'center',
                                    formatter : function(
                                        value, row,
                                        index) {
                                         var e = '<a  class="btn btn-primary btn-sm '
                                            + ''
                                            + '" href="#" mce_href="#" title="修改" onclick="edit(\''
                                            + row.id
                                            + '\')"><i class="fa fa-edit " style="margin-right: 5px"></i>修改</a> ';
                                        var d = '<a class="btn btn-danger btn-sm '
                                            + ''
                                            + '" href="#" title="删除"  mce_href="#" onclick="remove(\''
                                            + row.id
                                            + '\')"><i class="fa fa-remove" style="margin-right: 5px"></i>删除</a> ';

                                        return e + d;

                                    }
                                } ]
                        });
            });

    var jqD;

    var vm = new Vue({
        el : '#rrapp',
        data : {
            q : {
                mailName: null,
                typeId:null,
                mails:null
            },
            showList : true,
            title : null,
            user : {
                mails:'',
                mailName:'',
                typeIdArr:[]
             }
        },
        methods : {
            query : function() {
                vm.reload();
            },
            add : function() {
                vm.showList = false;
                vm.title = "新增";
                vm.user = {
                    mails:'',
                    mailName:'',
                    typeIdArr:[]
                };
                vm.getAllMails();
                $("#bindMail").find("li").remove();
            },
            getAllMails:function(){
                $("#unBindMail").find("li").remove();
                $.ajax({
                    type : "POST",
                    url : baseURL + "mailType/findAdMailTypeList",
                    contentType : "application/json",
                    success : function(r) {
                        if (r.code == 0) {
                           var str ='';
                            for(let item of r.result){
                             str  = str + '<li><div class="ty-tree-div">';
                             str  = str +'<label class="tyue-checkbox-wrapper">';
                             str  = str + '<span class="tyue-checkbox">';
                             str  = str + ' <input type="checkbox" class="tyue-checkbox-input" id="tyue-checkbox-blue">';
                             str = str + '<span class="tyue-checkbox-circle"></span></span>';
                             str = str + '<span class="tyue-checkbox-txt" title="'+item.state+'">';
                             str  = str + ''+item.typeName+'</span></label></div> </li>';
                            // <li>
                            //     <div class="ty-tree-div">
                            //         <label class="tyue-checkbox-wrapper">
                            //         <span class="tyue-checkbox">
                            //         <input type="checkbox" class="tyue-checkbox-input" id="tyue-checkbox-blue">
                            //         <span class="tyue-checkbox-circle">
                            //         </span>
                            //         </span>
                            //         <span class="tyue-checkbox-txt" title="穿梭框列表内容 ---- 1">
                            //         穿梭框列表内容 ---- 1
                            //     </span>
                            //     </label>
                            //     </div>
                            //     </li>
                            };
                           $("#unBindMail").append(str)
                        } else {
                            alert(r.msg);
                        }
                    }
                });
            },
            update : function() {
                var userId = getSelectedRow();
                if (userId == null) {
                        return;
                }
                vm.showList = false;
                vm.title = "修改";
                vm.getAllMails();
                vm.getUser(parseInt(userId.id));
            },

            del : function() {
                var userIds = getSelectedRow();
                if (userIds == null) {
                    return;
                }
                confirm('确定要删除选中的记录？', function() {
                    $.ajax({
                        type : "POST",
                        url : baseURL + "mail/delMail",
                        contentType : "application/json",
                        data : JSON.stringify({id:userIds.id}),
                        success : function(r) {
                            if (r.code == 0) {
                                alert('操作成功', function() {
                                    vm.reload();
                                });
                            } else {
                                alert(r.msg);
                            }
                        }
                    });
                });
            },
            saveOrUpdate : function() {
                 var url = vm.user.id == null ? "mail/saveMail"
                    : "mail/updateMail";
                 var btn = vm.$refs.submitBtn;
            if(!checkIsEmail(vm.user.mails)){
               alert("请输入正确的邮箱!");
               return false;
            }
            if(checkIsBank(vm.user.mailName)){
                alert("用户名称不能为空!");
                return false;
            }
            vm.user.typeIdArr = [];
            $("#bindMail .tyue-checkbox-txt").map(function (item) {
                vm.user.typeIdArr.push($(this).attr("title"));
                //console.log($(this).attr("title"));
            });
              //  console.log(vm.user);
               btn.disabled = true;
            $.ajax({
                    type : "POST",
                    url : baseURL + url,
                    contentType : "application/json",
                    data : JSON.stringify(vm.user),
                    success : function(r) {
                        btn.disabled = false;
                        if (r.code === 0) {
                            alert('操作成功', function() {
                                vm.reload();
                            });
                        } else {
                            alert(r.msg);
                        }
                    }
                });
            },
            getUser : function(userId) {
                vm.user.typeIdArr = [];
                $("#bindMail").find("li").remove();
                $.ajax({
                    type : "POST",
                    url : baseURL + "mail/getMail",
                    contentType : "application/json",
                    data : JSON.stringify({id:userId}),
                    success : function(r) {
                        if (r.code === 0) {
                            var str = '';
                           vm.user.mails = r.result.mails;
                           vm.user.mailName = r.result.mailName;
                           vm.user.id = r.result.id;
                          // console.log(r.result.typeIdList)
                            r.result.typeIdList.map(function (item) {
                                //console.log(vm.user.typeIdArr)
                                vm.user.typeIdArr.push(item.typeId);
                                str = str + '<li><div class="ty-tree-div"><label class="tyue-checkbox-wrapper"<span class="tyue-checkbox">';
                                str = str + '<input type="checkbox" class="tyue-checkbox-input" id="tyue-checkbox-blue">';
                                str = str + '<span class="tyue-checkbox-circle"></span></span>';
                                str = str + '<span class="tyue-checkbox-txt" title="'+item.typeId+'">'+item.typeName+'</span></label></div> </li>';
                            // <li>
                            //     <div class="ty-tree-div">
                            //         <label class="tyue-checkbox-wrapper">
                            //         <span class="tyue-checkbox">
                            //         <input type="checkbox" class="tyue-checkbox-input" id="tyue-checkbox-blue">
                            //         <span class="tyue-checkbox-circle">
                            //         </span>
                            //         </span>
                            //         <span class="tyue-checkbox-txt" title="穿梭框列表内容 ---- 7">
                            //         穿梭框列表内容 ---- 5
                            //     </span>
                            //     </label>
                            //     </div>
                            //     </li>

                            });
                           $("#bindMail").append(str);
                            //console.log(vm.user.typeIdArr);
                            $("#unBindMail .tyue-checkbox-txt").map(function (item) {
                                var thisV = $(this).attr("title");
                                //console.log(thisV);
                                //console.log(vm.user.typeIdArr.indexOf(thisV))
                               if(vm.user.typeIdArr.indexOf(thisV) != -1){
                                  $(this).parent().parent().parent().remove();
                               }
                                //console.log($(this).attr("title"));
                            });
                        } else {
                            alert(r.msg);
                        }
                    }
                });
            },
            getRoleList : function() {
                $.get(baseURL + "sys/role/select", function(r) {
                    vm.roleList = r.list;
                });
            },
           reload : function() {
                vm.showList = true;
                var opt = {
                    url: baseURL + 'mail/findMailPage',
                    silent: true,
                    query:{
                        limit : '10',
                        page : '0',
                        platformName : vm.q.platformName
                    }
                };
               $('#bootstrap-table').bootstrapTable('refresh',
                    opt);
             }
        }
    });
    function edit(id){
        vm.showList = false;
        vm.title = "修改";
        vm.getAllMails();
        vm.getUser(parseInt(id));
    };
    function remove(id){
        if (id == null) {
            return;
        }
        confirm('确定要删除选中的记录？', function() {
            $.ajax({
                type : "POST",
                url : baseURL + "mail/delMail",
                contentType : "application/json",
                data : JSON.stringify({id:id}),
                success : function(r) {
                    if (r.code == 0) {
                        alert('操作成功', function() {
                            vm.reload();
                        });
                    } else {
                        alert(r.msg);
                    }
                }
            });
        });
    };
</script>


</body>
</html>